<template>
  <div class="bigboxlogin">
    <div class="content">
      <div class="item-imgbox">
        <img
          src="../../public/images/cLXtYZcAS6tKaiGK1vMgU37SaqD1qgSyLNs8u6es.jpeg"
          alt=""
        />
      </div>
      <div class="cheng">欢迎使用后台管理系统</div>
      <div class="item-bottom">
        <input type="text" placeholder="请输入账号" v-model="login.mobile" />
        <input
          type="password"
          placeholder="请输入密码"
          v-model="login.password"
        />
        <button @click="btnlogin">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      login: {
        mobile: "admin",
        password: "123456",
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    async btnlogin() {
      try {
        const data = await this.$apis.logins(this.login);
        console.log(data);
        if (data.code === 200) {
          alert(data.msg);
          sessionStorage.setItem("token", data.data.remember_token);
          this.$router.push("/index");
        } else {
          alert(data.msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
  //生命周期
  created() {},
  mounted() {},
};
</script> 

<style scoped lang="scss">
.bigboxlogin {
  width: 100%;
  height: 100%;
  background: url("../../public/images/login_bg.1de8de0c.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.content {
  width: 368px;
}
.item-imgbox {
  width: 100%;
  margin-bottom: 3vh;
  text-align: center;
  img {
    width: 220px;
  }
}
.cheng {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: #2d8cf0;
}
.item-bottom {
  margin-bottom: 16vh;
  box-sizing: border-box;
  input {
    width: 100%;
    height: 35px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    border: none;
    padding: 0px 20px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    border-radius: 5px;
    line-height: 35px;
    color: aliceblue;
    background: #2d8cf0;
    text-align: center;
    border-style: none;
  }
}
</style>
